<template>
  <div class="doc-contain">
    <h1>Tab 标签</h1>
    <div class="preview-contain">
      <h2>基础用法</h2>
      <preview :component="demo" componentName="tab" demoName="demo"/>
      <h2>宽度超出时</h2>
      <preview :component="widthDemo" componentName="tab" demoName="widthDemo"/>
      <document :body="propBody" :headers="propHeaders" title="Tab 属性" type="prop"/>
      <document :body="slotBody" title="Tab 插槽" type="slot"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import preview from '../../../components/preview.vue'
import document from '../../../components/document.vue'
import demo from './demo.vue'
import widthDemo from './widthDemo.vue'

const propHeaders = ['属性', '说明', '数据类型']

const propBody = [
  ['modelValue', '选中值', 'string | number'],
  ['options', '可选项', 'Array [{label: string, value: string | number}]'],
]

const slotBody = [
  ['default', '自定义默认内容']
]
</script>


<style scoped>
.doc-contain {
  text-align: left;
  width: 100%;
}
</style>